<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jQuery.floating sample</title>
	</head>
	<body>

		<div id="contents" style="margin: 50px 0px; width:960px; text-align:right;">
			<div id="Area_Controll">
				<a href="javascript:void(0);" id="Act_showFloatingWindow">フローティングウィンドウを表示</a>
			</div>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
			<p>ほげほｇへおほげほげ</p>
		</div>
		<div>
			<a href="javascript:void(0);" id="Act_showFloatingWindowModal">フローティングウィンドウを表示</a>
		</div>
		<div id="floatingWindow-contents" style="display:none"><p class="floatingWindow-close">閉じる</p>
			<div id="historyList_Box">
				<ul>
					<li><a href="javascript:void(0)">項目</a></li>
					<li><a href="javascript:void(0)">項目</a></li>
					<li><a href="javascript:void(0)">項目</a></li>
					<li><a href="javascript:void(0)">項目</a></li>
					<li><a href="javascript:void(0)">項目</a></li>
					<li><a href="javascript:void(0)">項目</a></li>
					<li><a href="javascript:void(0)">項目</a></li>
					<li><a href="javascript:void(0)">項目</a></li>
					<li><a href="javascript:void(0)">項目</a></li>
					<li><a href="javascript:void(0)">項目</a></li>
					<li><a href="javascript:void(0)">項目</a></li>
					<li><a href="javascript:void(0)">項目</a></li>
					<li><a href="javascript:void(0)">項目</a></li>
					<li><a href="javascript:void(0)">項目</a></li>
					<li><a href="javascript:void(0)">項目</a></li>
				</ul>
			</div>

		</div>

		<div id="floatingWindow-modalContents" style="display:none">
			<p>こっちはモーダル画面全体型</p>
		</div>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
		<script type="text/javascript" src="../jquery.ezFloatingWindow.js"></script>
		<script type="text/javascript">
			$(function(){
					$("#Act_showFloatingWindow").ezFloatingWindow({displayMode: 'related right'});
					$("#Act_showFloatingWindowModal").ezFloatingWindow({displayMode: 'absolute',contentsElement: '#floatingWindow-modalContents'});
					});
				</script>
			</body>
		</html>

